<!--
 * @Autor: dingxiaolin
 * @Date: 2021-05-14 09:38:38
 * @LastEditors: dingxiaolin
 * @LastEditTime: 2021-05-18 12:06:39
-->
<template>
    <div class="selection">
        <div class="titlebar" @click="goListPage">近10月销量对比<span class="unit">(台)</span></div>
        <model @emit="getModel" :modelList="$store.getters['xiaoshou/modelList']"></model>
        <div class="line select">|</div>
        <areaCom @emit="getPq" :pqList="$store.getters['xiaoshou/pqList']"></areaCom>
    </div>
    <div id="tenmonthSalesLine" ref="tenmonthSalesLine"></div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs, watch, computed, nextTick, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { Sales } from '@/http';
import { type } from '@/http/interface';
import { AreaCom, Model } from '@/components';
import dateJs from 'dayjs';
import * as echarts from 'echarts';

export default defineComponent({
    name: 'tenmonthSalesLine',
    components: { AreaCom, Model },
    props: {},
    emits: [],
    setup(props, ctx) {
        const router = useRouter();
        const tenmonthSalesLine = ref<HTMLDivElement | null>(null);
        const state = reactive({
            pq: '',
            modelType: '',
            seriesName1: '',
            seriesName2: '',
            dataList1: [] as any,
            dataList2: [] as any,
            legendList: [] as any,
        });
        onMounted(() => {
            getData();
        });
        const getPq = (v) => {
            state.pq = v;
            getData();
        };
        const getModel = (v) => {
            state.modelType = v;
            getData();
        };
        const goListPage = () =>{
            router.push('/xsTable')
        }
        const getData = () => {
            const formList = {
                jx: state.modelType == '全部' ? '' : state.modelType,
                pq: state.pq == '全部' ? '' : state.pq,
            };
            Sales.GetSalesByTenMonths(formList).then((res: any) => {
                state.seriesName1 = '';
                state.seriesName2 = '';
                state.dataList1 = [];
                state.dataList2 = [];
                state.legendList = [];
                if (res.length > 0) {
                    state.seriesName1 = res[0].arg1 ? res[0].arg1.slice(0, 4) : '';
                    state.seriesName2 = res[0].arg2 ? res[0].arg2.slice(0, 4) : '';
                    res.forEach((item) => {
                        state.legendList.push(dateJs(item.arg1).month() + 1 + '月');
                        state.dataList1.push({ name: item.arg1, value: item.val1 });
                        state.dataList2.push({ name: item.arg2, value: item.val2 });
                    });
                    nextTick(() => {
                        draw(state.legendList, state.seriesName1, state.seriesName2, state.dataList1, state.dataList2);
                    });
                }
            });
        };
        const draw = (legendList, name1, name2, data1, data2) => {
            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        lineStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(0, 255, 233,0)',
                                    },
                                    {
                                        offset: 0.5,
                                        color: 'rgba(255, 255, 255,1)',
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(0, 255, 233,0)',
                                    },
                                ],
                                global: false,
                            },
                        },
                    },
                    fontSize: '12px',
                    backgroundColor: '#fff', //设置背景图片 rgba格式
                    color: 'black',
                    textStyle: {
                        color: '#000', //设置文字颜色
                    },
                    extraCssText: 'box-shadow: 0px 0px 20px inset #09E5ED',
                    formatter: function (params, ticket, callback) {
                        // console.log(params)
                        const item = params[0];
                        const item1 = params[1];
                        var string = '<div style="margin-left:5px">' + item.name.replace('-', '年') + '月</div>';
                        string += `<div style="display:flex;align-items: center;margin-top:5px;margin-left:5px"><div style="width:8px;height:8px;background:rgba(2,191,108,1);"></div><span style= "padding:0 10px">${item.name.slice(
                            0,
                            4
                        )}</span> <span style = "padding:0 20px">${item.value} 台</span> </div>`;
                        if (item1 != undefined) {
                            string += `<div style="display:flex;align-items: center;margin-top:2px;margin-left:5px"><div style="width:8px;height:8px;background:#F7B500;"></div><span style= "padding:0 10px">${item1.name.slice(
                                0,
                                4
                            )}</span> <span style = "padding:0 20px">${item1.value} 台</span> </div>`;
                        }
                        return string;
                    },
                },
                legend: {
                    bottom: 5,
                    itemWidth: 8,
                    itemHeight: 8,
                    itemGap: 25,
                    textStyle: {
                        fontSize: 10,
                        color: '#FFFFFF',
                    },
                    icon: 'rect',
                },

                grid: {
                    top: '15%',
                    left: '1%',
                    right: '5%',
                    bottom: '18%',
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: 'category',
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        splitArea: {
                            // show: true,
                            color: '#f00',
                            lineStyle: {
                                color: '#f00',
                            },
                        },
                        axisLabel: {
                            fontSize: 8,
                            color: '#909399',
                        },
                        splitLine: {
                            show: false,
                        },
                        boundaryGap: false,
                        // data: ['A', 'B', 'C', 'D', 'E', 'F'],
                        data: legendList,
                    },
                ],

                yAxis: [
                    {
                        type: 'value',
                        min: 0,
                        // max: 140,
                        splitNumber: 4,
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(255,255,255,0.1)',
                            },
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: true,
                            fontSize: 8,
                            margin: 20,
                            textStyle: {
                                color: '#909399',
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                    },
                ],
                series: [
                    {
                        // name: '2021',
                        name: name1,
                        type: 'line',
                        smooth: true, //是否平滑
                        showSymbol: false,
                        symbol: 'circle',
                        symbolSize: 1,
                        lineStyle: {
                            normal: {
                                // color: "#00b3f4",
                                // shadowColor: 'rgba(0, 0, 0, .3)',
                                // shadowBlur: 0,
                                // shadowOffsetY: 5,
                                // shadowOffsetX: 5,
                            },
                        },
                        label: {
                            show: false,
                            position: 'top',
                            textStyle: {
                                color: '#fff',
                            },
                        },
                        itemStyle: {
                            color: 'rgb(2,191,108)',
                            // borderColor: "#fff",
                            borderWidth: 3,
                            shadowColor: 'rgba(0, 0, 0, .3)',
                            shadowBlur: 0,
                            shadowOffsetY: 2,
                            shadowOffsetX: 2,
                        },
                        tooltip: {
                            show: true,
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: 'rgba(0,245,123,1)',
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(0,245,123,0)',
                                        },
                                    ],
                                    false
                                ),
                                shadowColor: 'rgba(0,245,123, 0.9)',
                                shadowBlur: 20,
                            },
                        },
                        // data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02, 100,200,200,300]
                        data: data1,
                    },
                    {
                        name: name2,
                        // name: '2020',
                        type: 'line',
                        smooth: true, //是否平滑
                        showSymbol: false,
                        symbol: 'circle',
                        symbolSize: 1,
                        lineStyle: {
                            normal: {
                                // color: "#00ca95",
                                // shadowColor: 'rgba(0, 0, 0, .3)',
                                // shadowBlur: 0,
                                // shadowOffsetY: 5,
                                // shadowOffsetX: 5,
                            },
                        },
                        label: {
                            show: false,
                            position: 'top',
                            textStyle: {
                                color: '#00ca95',
                            },
                        },

                        itemStyle: {
                            color: '#F7B500 ',
                            // borderColor: "#fff",
                            borderWidth: 3,
                            shadowColor: 'rgba(0, 0, 0, .3)',
                            shadowBlur: 0,
                            shadowOffsetY: 2,
                            shadowOffsetX: 2,
                        },
                        tooltip: {
                            show: true,
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: '#F7B500 ',
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(247,181,0,0)',
                                        },
                                    ],
                                    false
                                ),
                                shadowColor: 'rgba(247,181,0, 0.9)',
                                shadowBlur: 20,
                            },
                        },
                        // data: [281.55, 398.35, 214.02, 179.55, 289.57, 356.14, 502.84, 205.97, 332.79, 281.55,],
                        data: data2,
                    },
                ],
            };
            let myChart = echarts.init(document.getElementById('tenmonthSalesLine') as HTMLElement);
            window.addEventListener('resize', () => {
                myChart.resize();
            });
            myChart.setOption(option);
        };

        return {
            ...toRefs(state),
            getPq,
            getModel,
            tenmonthSalesLine,
            goListPage
        };
    },
});
</script>

<style lang="scss" scoped>
#tenmonthSalesLine {
    margin: 0 20px;
    width: calc(100%-40px);
    height: 250px;
}
#noData {
    width: 100%;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
